<template>
  <div class="hig">
    <!-- data.h 设置高度
    data.sliced 设置间隙位移
    innerSize 设置内圈直径大小 -->
    <div class="fsa">
      <hig :bgBol="true" :optionData="optionData" style="width:800px;height:500px;" />
      <hig2 :bgBol="true" :dataList="dataList" style="width:800px;height:500px;" :id="'11'"></hig2>
      <hig2 :dataList="dataList2" :color1="color1" :color2="color2" style="width:800px;height:500px;" :id="'22'"></hig2>
    </div>
    <div class="fsa">
      <hig2 :bgBol="true" :dataList="dataList3" :color1="color3" :color2="color4" style="width:800px;height:500px;" :id="'2-1'"></hig2>
      <hig2 :bgBol="true" :dataList="dataList"  :color1="color5" :color2="color6" :h="4" :innerSize="200" style="width:800px;height:500px;" :id="'2-2'"></hig2>
      <hig2_3 style="width:800px;height:500px;" :id="'2-3'"></hig2_3>
    </div>
    <div class="fsa">
      <pie :id="'pie'" style="width:500px;height:500px;"></pie>
      <pie2 :id="'pie1'" style="width:500px;height:500px;"></pie2>
      <pie3 :id="'pie2'" style="width:500px;height:500px;"></pie3>
    </div>
    <div class="fsa">
      <pie4 :id="'pie4'" style="width:500px;height:500px;"></pie4>
      <gauge :id="'gauge1'" style="width:500px;height:500px;"></gauge>
      <gauge2 :id="'gauge2'" style="width:500px;height:500px;"></gauge2>
    </div>
    <div class="fsa">
      <radar :id="'radar'" :legendData="legendData" :indicator="indicator" :radarValue="radarValue" :colorArr="colorArr" style="width:500px;height:500px;"></radar>
      <radar :id="'radar1'" :legendData="legendData2" :indicator="indicator" :radarValue="radarValue2" :colorArr="colorArr2" style="width:500px;height:500px;"></radar>
      <radar :id="'radar2'" :legendData="legendData3" :indicator="indicator" :radarValue="radarValue3" :colorArr="colorArr3" style="width:500px;height:500px;"></radar>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { reactive } from "vue";
import hig from "@/components/hig.vue"
import hig2 from "@/components/hig2.vue"
import hig2_3 from "@/components/hig2-3.vue"
import pie from '@/components/pie.vue'
import pie2 from '@/components/pie2.vue'
import pie3 from '@/components/pie3.vue'
import pie4 from '@/components/pie4.vue'
import gauge from '@/components/gauge/gauge.vue'
import gauge2 from '@/components/gauge/gauge2.vue'
import radar from '@/components/radar/radar.vue'
const state = reactive({
  optionData: [
    {
      name: "数据4",
      value: 10,
      h: 0
    },
    {
      name: "数据5",
      value: 20,
      h: 0,
      sliced: true
    }],
    dataList: [
        {
          name: "XXX区",
          y: 10254,
          h: 0,
          bfb: 0,
          
        },
        {
          name: "XXX区",
          y: 6894,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 7667,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 4287,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 8686,
          h: 0,
          bfb: 0
        },
        {
          name: "XXX区",
          y: 16112,
          h: 0,
          bfb: 0
        }
    ],
    dataList2: [
      {
        name: "XXX区",
        y: 10254,
        h: 0,
        bfb: 0,
        
      },
      {
        name: "XXX区",
        y: 6894,
        h: 0,
        bfb: 0
      },
      {
        name: "XXX区",
        y: 7667,
        h: 0,
        bfb: 0
      },
      {
        name: "XXX区",
        y: 4287,
        h: 0,
        bfb: 0
      },
      {
        name: "XXX区",
        y: 8687,
        h: 0,
        bfb: 0
      }
    ],
    dataList3: [
      {
        name: "XXX区",
        y: 10254,
        h: 0,
        bfb: 0,
        
      },
      {
        name: "XXX区",
        y: 6894,
        h: 0,
        bfb: 0
      },
      {
        name: "XXX区",
        y: 7667,
        h: 0,
        bfb: 0
      },
      {
        name: "XXX区",
        y: 4287,
        h: 0,
        bfb: 0
      }
    ],
    color1: [
      "#FF6969",
      "#9CD440",
      "#FFDB00",
      "#AC4BD4",
      "#00AFEF",
    ],
    color2: [
      "#FF6969",
      "#9CD440",
      "#FFDB00",
      "#AC4BD4",
      "#00AFEF",
    ],
    color3: [
      "#E23AF5",
      "#00FFFF",
      "#1523CB",
      "#4821CA",
    ],
    color4: [
      "#BB42EF",
      "#7DE2BF",
      "#1523CB",
      "#4821CA",
    ],
    color5: [
      "#1B60AD",
      "#53B6DE",
      "#9A6539",
      "#A07F46",
      "#1523CB",
      "#A07F46",
    ],
    color6: [
      "#051F4F",
      "#2B606D",
      "#EF7C2D",
      "#F6CA5D",
      "#AADDF6",
      "#F6CA5D",
    ],
    // 雷达图1
    legendData: ['多遇地震-功能损失', '多遇地震—恢复时间'],
    indicator: [{
          text: '医疗系统',
          max: 6000,
      },
      {
          text: '供电系统',
          max: 5000
      },
      {
          text: '通信系统',
          max: 5000
      },
      {
          text: '供热系统',
          max: 5000,
          //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
      },
      {
          text: '燃气系统',
          max: 5000
      },
      {
          text: '排水系统',
          max: 5000
      },
      {
          text: '供水系统',
          max: 5000,
          //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
      },
      {
          text: '交通系统',
          max: 5000
      },
      {
          text: '建筑群',
          max: 5000
      }
    ],
    colorArr: ['#FF123E', '#00D8FF'],
    radarValue: [[4300, 4700, 3600, 3900, 3800, 4200, 4300, 4700, 3600], [3200, 3000, 3400, 2000, 3900, 2000, 3200, 3000, 3400]],
    // 雷达图2
    legendData2: ['设防地震-功能损失', '设防地震-恢复时间'],
    colorArr2: ['#B2FC5F', '#E98948'],
    radarValue2: [[2500, 3000, 3600, 3900, 3800, 2000, 4300, 500, 3600], [4000, 3000, 3400, 2000, 3900, 5000, 3200, 3000, 3400]],
    legendData3: ['罕遇地震—功能损失', '罕遇地震—恢复时间'],
    colorArr3: [ '#B2FC5F', '#FF123E'],
    radarValue3: [[1000, 4700, 3600, 3900, 3800, 4200, 4300, 4700, 3600], [3200, 2500, 3400, 2000, 3900, 2000, 3200, 3000, 500]],
});
const { optionData, dataList, dataList2, color1, color2, color3, color4, dataList3, legendData, 
        indicator, radarValue, colorArr, legendData2, colorArr2, radarValue2, legendData3, colorArr3,
        radarValue3, color5, color6
  } = state;
</script>

<style lang="less" scoped>
  .hig{
    width: 100%;
    // height: 100%;
    background: #0F0F1B;
    display: flex;
    flex-direction: column;
    padding-bottom: 200px;
  }
  
</style>